<template>
  <div>

    <el-select v-model="language" placeholder="请选择语音包" @change="audition">
      <el-option v-for="item in languagePackage" :key="item.language" :label="item.name" :value="item.language"></el-option>
    </el-select>

    <el-table :data="user_list" class="input-w-700 mt10" :show-header="false">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button :disabled="scope.row.ok" v-for="place in place_list" @click="play(scope.row,place)" type="primary">{{place}}</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import {getLanguagePackage, speak} from '@/utils/zzDouUtils/audioUtil'
export default {
  data() {
    return {
      user_list:[
        {name:'张三',ok:false},
        {name:'李四',ok:false},
        {name:'王五',ok:false},
        {name:'赵六',ok:false},
        {name:'田七',ok:false},
      ],
      place_list:[
        "301","302","303"
      ],
      languagePackage:[],
      language:'',
    };
  },
  created() {
    this.languagePackage = getLanguagePackage();
    this.language = this.languagePackage[0].language;
  },
  methods: {
    play(row,place){
      row.ok = true;
      speak(`请${row.name}到${ place.replace(/2/g, "二").split('').join(' ') }位置等待考试`,this.language)
    },
    audition(){
      speak('你好，我是你的智能语音助手',this.language)
    }
  }
};
</script>
